<template>
    <div class="tuijian">

      <div class="tuijianT">
        <div class="tuijianT-img">
          <img src="http://img1.qunarzz.com/piao/fusion/1711/89/ebc329f16c55bb02.png">
        </div>
        <p>猜你喜欢</p>
      </div>
      <div class="clear"></div>
      <router-link tag="li" class="tuijianB" v-for="item of tuijian" :key="item.id" :to="'detail/' +item.id">
        <div class="tuijianBL">
          <img :src="item.imgUrl">
        </div>
        <div class="tuijianBR">
          <p>{{item.title}}</p>
          <div class="desc">{{item.desc}}</div>
          <span>¥<em class="num">{{item.num}}</em><em class="num-r">起</em></span>
        </div>
      </router-link>
    </div>
</template>

<script>
    export default {
        name: "tuijian",
        props:{
          tuijian:Array
        },
        data(){
          return {

          }
        }
    }
</script>

<style scoped lang="stylus">
  @import "~css/varibles.styl";
  .tuijian{ width: 100%;height: auto;background: #ffffff;margin-top: .18rem}
  .tuijianT{ width: 100%;height: auto;padding-top: 0.1rem;padding-left: 0.2rem;text-align: center;line-height: 0.8rem}
  .tuijianT-img { width: 10%;float: left;}
  .tuijianT-img img { width: 60%}
  .tuijianT p{ width: 90%;float: left;text-align: left}
  .clear{ width: 100%;clear: both}
  .tuijianB { width: 100%;height: 0;padding-bottom: 30%;border-bottom: 1px solid #eee;cursor: pointer}
  .tuijianBL{ width: 25%;display: inline-block;float: left;border-radius: 0.2rem}
  .tuijianBL img{ width: 100%;padding:0.2rem;border-radius: 0.2rem}
  .tuijianBR{ width: 70%;display: inline-block;float: right;margin-top: .56rem}
  .tuijianBR p{ width:100%;display: inline-block;float: left;font-size: .32rem;color: #212121;textoverflow()}
  .desc{ width:100%;display: inline-block;float: left;font-size: .26rem;color: #c2c2c2;margin-top: .22rem;textoverflow()}
  .tuijianBR span{ width:100%;display: inline-block;float: left;font-size: .26rem;color: #212121;textoverflow();margin-top: .22rem;
    color: #ff8300;}
  .num{ font-size: .4rem}
  .num-r{ color: #212121}
</style>
